<template>
  <div>
    <page-container title="文章管理">
      <template #extra>
        <el-button type="primary" @click="publish">发布文章</el-button>
      </template>
      <template #form>
        <el-row>
          <div>文章分类:</div>
          <el-select
            v-model="params.cate_id"
            placeholder="请选择"
            style="width: 180px">
            <!-- label是展示的，value是值是提交的 -->
            <el-option
              v-for="item in cateListData"
              :key="item.cate_id"
              :label="item.cate_name"
              :value="item.id" />
          </el-select>
          <div>发布状态:</div>
          <el-select
            v-model="params.state"
            placeholder="请选择"
            style="width: 180px">
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
          <el-button type="primary" @click="searchHandle"> 搜索</el-button>
          <el-button plain @click="resetHandle">重置</el-button>
        </el-row>

        <el-table
          border
          v-loading="Loading"
          :data="tableListData"
          stripe
          :default-sort="{ prop: 'date', order: 'descending' }"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#415845',
            color: '#fff',
            'font-size': '14px',
            'font-weight': 'bold',
            height: '50px'
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%">
          <el-table-column prop="title" label="文章标题" width="280">
            <template #default="{ row }">
              <el-link type="primary" :underline="false">
                {{ row.title }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="cate_name" sortable label="分类" />
          <el-table-column prop="pub_date" sortable label="发布时间">
            <template #default="{ row }">
              {{ formatDate(row.pub_date) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" sortable label="状态" />
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-button
                plain
                type="primary"
                :icon="Edit"
                circle
                @click="articleEditHandle(row)">
              </el-button>
              <el-button
                plain
                type="danger"
                :icon="Delete"
                circle
                @click="articleDeleteHandle(row)">
              </el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="params.pagenum"
          v-model:page-size="params.pagesize"
          :page-sizes="[1, 5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="jumper,total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          style="margin-top: 20px; justify-content: flex-end"
          @current-change="handleCurrentChange" />
        <!-- 文章编辑抽屉 -->
        <articleEdit ref="articleDrawer" @updata="getarticleList"></articleEdit>
      </template>
    </page-container>
  </div>
</template>
<script setup>
import articleEdit from '@/components/articleEdit.vue';
import { ref, onMounted } from 'vue';
import { Delete, Edit, InfoFilled } from '@element-plus/icons-vue';
import { cateListApi, articleListApi, delArticleApi } from '@/api/article';
import { formatDate } from '@/utils/format.js';

// 发布文章抽屉
const articleDrawer = ref();
const publish = () => {
  articleDrawer.value.open({});
};

const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
});
// 文章分类下拉框
let cateListData = ref([]);
const getCateList = async () => {
  const res = await cateListApi();
  cateListData.value = res.data;
  console.log(cateListData.value, '文章分类下拉框');
};
// 初始化数据
let tableListData = ref([]);
const total = ref(0);
let Loading = ref(false);
// 获取文章列表
const getarticleList = async () => {
  Loading.value = true;
  const res = await articleListApi(params.value);
  tableListData.value = res.data;
  console.log(tableListData.value, '文章列表');
  Loading.value = false;
  total.value = res.total;
};
// 初始化数据
onMounted(() => {
  getCateList();
  getarticleList();
});
// 搜索事件
const searchHandle = () => {
  params.value.pagenum = 1;
  getarticleList();
  console.log('搜索');
};
// 重置事件
const resetHandle = () => {
  console.log('重置');
  params.value = {
    pagenum: 1,
    pagesize: 5,
    cate_id: '',
    state: ''
  };
  getarticleList();
};
// 分页组件属性
const small = ref(false);
const disabled = ref(false);
const background = ref(false);
// 分页事件
const handleSizeChange = (val) => {
  console.log(val);
  // Loading.value = true;
  params.value.pagenum = 1;
  params.value.pagesize = val;
  getarticleList();
  // Loading.value = false;
};
const handleCurrentChange = (val) => {
  console.log(val);
  // Loading.value = true;
  params.value.pagenum = val;
  getarticleList();
  // Loading.value = false;
};

// 文章编辑事件
const articleEditHandle = (row) => {
  // console.log(row);
  articleDrawer.value.open(row);
};
// 文章删除事件
const articleDeleteHandle = (row) => {
  console.log(row);
  ElMessageBox.confirm('您确定要删除该文章吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await delArticleApi(row.id);
      if (res.code === 0) {
        ElMessage.success(res.message);
        getarticleList();
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};
</script>
<style lang="less" scoped>
.page-container {
  box-sizing: border-box;
}

.el-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-select {
    margin-right: 30px;
  }

  div {
    margin-right: 20px;
    font-size: 15px;
  }
}
</style>
